<template>
    <div class="sonpopular">
        <!-- <div> -->
            
            <router-link :to="{name:'Xq',query:{goodsid:goodsid}}">
                <div class="top">
                    <img :src="cakeimage" alt="" @click="fun()">
                </div>
            </router-link>
                <div class="bottom">
                    <h3>{{cakename}}</h3>
                    <p>{{goodsid}}</p>
                    <p>{{cakebrief}}</p>
                    <span class="sp1" >{{cakeprice |cakeprice}}</span><span class="sp2"  >{{cakeoriginal |cakeprice}}</span>
                    <p  v-if="this.arr.length!=0"><span class="sp3">{{scorenum}}</span><span class="sp4" >{{cakeingredients | htext}}</span></p>
                </div>
    </div>
</template>

<script>
// import {getlink} from "@/api/getapi.js"
export default {
    data(){
        return {
            arr:[],
            arrb:[]
        }
    },
    filters:{
        htext(val){
            if(val.length>8){
                return val.substr(0,8)+"..."
            }
            else{
                return val
            }
        },
        cakeprice(val){
            if(val!=null){
                return "￥"+val
            }
        }
    },
    props:["cakeimage","cakename","cakebrief","cakeprice","cakeoriginal","cakeingredients","goodsid","scorenum"],
    methods:{
        fun(goodsid){
            this.$router.push({name:"xq",query:{goodsid:goodsid}})
        }
    }
}
</script>

<style scoped>
    .sonpopular{
        width: 49%;
        margin-top: 0.05rem;
        font-size: 0.12rem;
    }
    .top{
        border: 1px solid #ddd;
        box-sizing: border-box;
        overflow: hidden;
    }
    img{
        width: 100%;
        height: 100%;
    }
    span{
        margin: 0 0.05rem;
    }
    .sp1{
        color: red;
        font-size: 0.16rem;
    }
    .sp2{
        color: rgb(210, 210, 210);
        text-decoration: line-through;
    }
    h3{
        white-space: wrap;
        color: #2e2d2d;
        font-size: 0.14rem;
        margin: 0.1rem 0;
    }
    p{
        color: rgb(153, 153, 153);
        white-space: nowrap;
        margin-bottom: 0.05rem;
    }
    .sp4{
        overflow: hidden;
    }
</style>